20231129
p5.js
Generative Art
View Source Code
// let img;
// function preload() {
// // img = loadImage('assets/outdoor_image.jpg');
// img = loadImage("assets/outdoor_spheremap.jpg");
// }
// function setup() {
// createCanvas(640, 640, WEBGL);
// }
// function draw() {
// background(220);
// imageMode(CENTER);
// push();
// {
// translate(0, 0, -200);
// scale(2);
// image(img, 0, 0, width, height);
// }
// pop();
// ambientLight(50);
// imageLight(img);
// specularMaterial(20);
// noStroke();
// scale(2);
// rotateX(frameCount * 0.005);
// rotateY(frameCount * 0.005);
// box(25 * 5);
// }
let img;
let slider;
let g
function preload() {
img = loadImage("assets/outdoor_spheremap.jpg");
}
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
g = createGraphics(width, height)
slider = createSlider(0, 400, 400, 1);
slider.position(0, height);
slider2 = createSlider(0, 400, 400, 1);
slider2.position(200, height);
}
function draw() {
background(220);
orbitControl()
imageMode(CENTER);
// push();
// {
// translate(0, 0, -200);
// scale(2);
// image(img, 0, 0, width, height);
// }
// pop();
push();
{
texture(img);
scale(5000);
sphere(1);
}
pop();
{
for (let y = 0; y < g.height; y+=64) {
for (let x = 0; x < g.width; x+=64) {
g.fill(
random() * 255,
random() * 255,
random() * 255
)
g.rect(x, y, 100, 100)
}
}
}
push();
{
translate(0, 0, -150);
scale(2);
image(g, 0, 0, width / 4, height/ 4);
}
pop();
ambientLight(10);
if (int(frameCount / 1000) % 2 == 0) {
imageLight(img);
} else {
imageLight(g);
}
specularMaterial(slider2.value());
shininess(slider.value());
noStroke();
scale(2);
push();
{
translate(-50, 0, 0);
sphere(15 * 4);
}
pop();
push();
{
translate(50, 0, 0);
rotateX(frameCount * 0.005);
rotateY(frameCount * 0.005);
box(15 * 6);
}
pop();
push();
{
translate(50, 100, 0);
box(15 * 6);
}
pop();
}